// ===搜索栏api===
const otxt = document.getElementById("txt");
const olist = document.getElementById("list"); //list由js生成
const url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su";
const osearch = document.querySelector(".search");

// 搜索栏输入时获取
otxt.addEventListener("input", function() {
    olist.style.display = "block";
    // 3没有内容 下拉栏也为空
    if (this.value === "") {
        olist.innerHTML = "";
        return; 
    }
    const str = `wd=${this.value}&cb=xixi`;
    const script = document.createElement("script");
    script.src = url + "?" + str;
    document.body.appendChild(script);
    window.xixi = function(res) {
        let str = "";
        for (let i = 0; i < res.s.length; i++) {
            str += `<li>${res.s[i]}</li>`
        }
        // 放到olist里
        olist.innerHTML = str;
    }

    olist.addEventListener("click", function(eve) {
        let e = eve || window.event;
        let target = e.target || e.srcElement;
        // console.log(target);
        // li点击时消失
        olist.style.display = "none";
        // 把内容设置给搜索框
        otxt.value = target.innerText;

    })
    osearch.addEventListener("click", function() {
        otxt.value = "";
        location.href = "./goodslist.html"

    })
})




// ===============


//轮播图
        // function Banner(index){
        //     this.left = document.getElementById("left");
        //     this.right = document.getElementById("right");
        //     this.imgbox = document.querySelector(".imgbox");
        //     this.imgs = this.imgbox.children;
        //     this.index = index;
        //     this.list=document.querySelector(".list");
        //     this.fenye= document.querySelectorAll(".fenye");

        //     // 补全布局：
        //     // 根据实际的图片数量计算图片容器的尺寸
        //     this.imgbox.style.width = this.imgs.length * this.imgs[0].offsetWidth + "px";
        //     // 根据默认索引，设置图片容器的真实位置
        //     this.imgbox.style.left = this.index * -this.imgs[0].offsetWidth + "px";

        //     // 2. 执行绑定点击事件
        //     this.addEvent();
        // }
        // Banner.prototype = {
        //     constructor:Banner,
        //     addEvent:function(){
              
        //         const that = this;
        //         this.left.onclick = function(){
        //             that.changeIndexLeft()
        //         }
        //         this.right.onclick = function(){
        //             that.changeIndexRight()
        //         }
        //         // forEach((val,idx)=>{
        //         //     this.fenye=idx;
        //         // })
        //         // this.fenye.onclick=function(){
        //         //     console.log(val); 
                   
        //         //     that.changeIndex()
                 
        //         // }
        //         this.autoplay()
        //         // this.fenye.onclick=function(){
        //         //   that.changeImgbox()
        //         // }
        //     },
        //     // changeIndex:function(){
        //     //     console.log(1);
        //     //     foreach(fenye,idx=>{
        //     //         this.index=index;
        //     //         console.log(this.index);
        //     //     })
        //     //     if(this.index >index){
        //     //         that.changeIndexLeft()
        //     //     }else{
        //     //         that.changeIndexRight()
        //     //     }
        //     //     index=this.index
        //     // },
        //     // changeImgbox:function(){
        //     //     foreach(fenye,idx=>{
        //     //         this.index=index;
        //     //         console.log(this.index);
        //     //     })
        //     //     if(this.index> index){
        //     //                     // console.log("左");
        //     //                     that.changeIndexRight()
        //     //                 }
        //     //                 if(this.index < index){
        //     //                     // console.log("右");
        //     //                     that.changeIndexLeft()
        //     //                 }
        //     //                 //当前点击的就是下一次要走的
        //     //                 index = this.index;
        //     // },
            
                  
        //     changeIndexLeft:function(){
        //         // 计算索引：
        //         if(this.index === 0){
        //             this.index=this.imgs.length-2;
        //             this.imgbox.style.left = -(this.imgs.length-1)*this.imgs[0].offsetWidth + "px";
        //         }else{
        //             this.index--;

        //         }
        //         this.changePos();
        //     },
        //     changeIndexRight:function(){
        //         // 计算索引：++
        //         if(this.index === this.imgs.length-1){               
        //             this.index = 1;
        //             this.imgbox.style.left = 0;
        //         }else{
        //             this.index++;
        //         }
        //         this.changePos();
        //     },
        //     changePos:function(){
        //         move(this.imgbox,{
        //             left: -this.index * this.imgs[0].offsetWidth
        //         })
        //     },
        //     autoplay:function(){           
        //             const that=this;
        //             clearInterval(that.t)
        //             that.t=setInterval(()=>{
        //                 this.changeIndexRight()
        //                 this.imgbox.onmouseenter = function(){
        //                     clearInterval(that.t);
        //                 }
        //                 this.imgbox.onmouseleave = function(){
        //                  that.autoplay();
        //                 }
        //             },3000)               
        //     }
        // }
        
        // new Banner(1);
        
  

        //二级菜单
 
       $(function(){
           $("ul").find("li").hover(function(){
               $(this).children("ul").show();
           },function(){
               $(this).children("ul").hide();
           })
       }) 


//楼层跳转
$(".btns").children("li").click(function(){
    $("html").stop().animate({
        scrollTop: $(".floor").eq($(this).index()).offset().top
    })
})
$(".lcdh").scroll(function(){
    if($(".floor").eq($(this).index()).offset().top<500){
        $(".lcdh").style().display(none)
    }
})
$("#sb").click(function(){
    $("html").stop().animate({        
        scrollTop: 500
    })
})
$("#xb").click(function(){
    $("html").stop().animate({        
        scrollTop:2000 
    })
})


//楼层位置随滚动屏出现或消失以及位置高亮
const ofloor=document.querySelectorAll(".floor")
const oLi=document.querySelectorAll(".list li")

window.onscroll=function(){
    let scrollTop=window.scrollY
    for(let i=0;i<ofloor.length;i++){
 if(scrollTop>=ofloor[i].offsetTop-200){
     for(let j=0;j<oLi.length;j++){
         oLi[j].className=""
     }
        oLi[i].className="red"
 
        }
        if(document.documentElement.scrollTop<4800&&document.documentElement.scrollTop>=500){
            document.querySelector(".lcdh").style.display="block"
        }else{
            document.querySelector(".lcdh").style.display="none"
        }
 
    }
 }

 //================================
const ocart = document.querySelector(".cart");
    const omy = document.querySelector(".my");
    const ologin = document.querySelector(".login");
    const owelcome = document.querySelector(".welcome");
    const oun = document.querySelector(".un");
    const oexit = document.querySelector(".exit");
    // 判断是否登录
    if (localStorage.getItem("isLogin") === "ok") {
        ologin.style.display = "none";
        owelcome.style.display = "block";
        oun.innerHTML = localStorage.getItem("username");
    } else {
        ologin.style.display = "block";
        owelcome.style.display = "none";
        oun.innerHTML = "xxx";
    }
    // 点击退出
    oexit.onclick = function() {
            localStorage.removeItem("username");
            localStorage.setItem("isLogin", "");
            ologin.style.display = "block";
            owelcome.style.display = "none";
            oun.innerHTML = "xxx";
        }
        // 守卫登录1 页面不允许跳转购物车
    ocart.onclick = function() {
        if (localStorage.getItem("isLogin") === "ok") {
            location.href = "./cart.html"
        } else {
            alert("未登录状态，不允许打开购物车，请先登录")
            location.href = "./register.html"
        }
    }

    omy.onclick = function() {
        if (localStorage.getItem("isLogin") === "ok") {
            location.href = "./my.html"
        } else {
            alert("未登录状态，不允许打开个人中心，请先登录")
            location.href = "./register.html"
        }
    }



